<template>
  <div class="BoxGroupings">
    <div>
      <p class="ppp" @click="change">x</p>
      <div>
        <div>
          <p>物品名称</p>
          <input v-model="from.name" type="text" />
        </div>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="insert" type="success">添加</el-button>
      </div>
      <el-table :data="tableData.list" border style="width: 100%;">
        <el-table-column prop="id" label="物品白名单" width="180"></el-table-column>
        <el-table-column prop="name" label="物品名称" width="180"></el-table-column>
        <el-table-column prop="probabilityShow" label="展示几率" width="180"></el-table-column>
        <el-table-column prop="probabilityInfact" label="实际几率" width="180"></el-table-column>
        <el-table-column prop="price" label="价格" width="180"></el-table-column>
        <el-table-column prop="order" label="排序"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="updata(scope.row)" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delet(scope.row.id)">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentChange"
        background
        layout="prev, pager, next"
        :total="tableData.pages*10"
      ></el-pagination>
    </div>
    <div class="Exhibition" v-if="show">
      <div>
        <div class="idd">
          <span>物品名称</span>
          <input :class="num == 0?'color':''" v-model="name3" @keydown.enter="down" />
          <div class="divs" v-if="shows">
            <div v-if="sell.length == 0">暂无数据</div>
            <p
              @click="changesell(item.name,item.id)"
              v-for="(item,index) in sell.list"
              :key="item+index"
              v-else
            >{{item.name}}</p>
            <el-pagination
            @current-change="currentChanges"
            background
            layout="prev, pager, next"
            :total="sell.pages*10"
          ></el-pagination>
          </div>
        </div>
        <div class="img">
          <span>预览图</span>
          <div  v-if="bool == 0" >
            <img   class="imgo" :src="imageUrl">
          </div>
            <el-upload
              v-else
              class="avatar-uploader"
              v-bind:action="imgUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              name="file">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <div>
          <span>品质</span>
          <select v-if="bool == 0" class="select" v-model="quality">
            <option :value="quality">{{quality}}</option>
          </select>
           <select v-else @change="changesel" class="select" v-model="quality">
            <option v-for="(item,index) in sel" :key="item+index" :value="item.name">{{item.name}}</option>
          </select>
        </div>
        <div>
          <span>展示几率</span>
          <input v-model="from2.probabilityInfact" />
        </div>
        <div>
          <span>实际几率</span>
          <input v-model="from2.probabilityShow" />
        </div>
        <div>
          <span>物品价格</span>
          <input v-if="bool == 0" disabled v-model="from2.price" />
          <input v-else  v-model="from2.price" />
        </div>
        <div>
          <span>排序</span>
          <input v-model="from2.order"/>
        </div>
        <div>
          <el-button v-if="bool == 0" @click="insertAdd" type="success">添加</el-button>
          <el-button v-else type="success" @click="updataAdd">修改</el-button>
        </div>

        <p @click="showw" class="p">x</p>
      </div>
    </div>
    <form ref="form">
        <input name="name" v-model="name3" type="hidden">
        <input name="img" v-model="img" type="hidden" >
        <input name="quality"  v-model="from2.quality" type="hidden">
        <input name="probabilityInfact" v-model="from2.probabilityInfact" type="hidden">
        <input name="probabilityShow" v-model="from2.probabilityShow" type="hidden">
        <input name="price" v-model="from2.price" type="hidden">
        <input name="order" v-model="from2.order" type="hidden">
        <input name="id" v-model="ids" type="hidden">
    </form>
  </div>
</template>
<script>
import $axios from "../../../utils/publicApi";
import axios from 'axios'
import BasicsApi from "../../../api/Basicpath";
import { Loading } from 'element-ui';
export default {
  props: ["name", "boxGroupId"],
  data() {
    return {
      imgUpload: `${BasicsApi}/gamemall/upload/image`,
      imageUrl:"无",
      tableData: "",
      show:false,
      shows: false,
      bool: 0,
      from: {
        name: "",
        id: this.boxGroupId,
        currentPage: 1,
        pageSize: 3
      },
      from1: {
        name: "",
        currentPage:1,
        pageSize: 3,
        id: this.boxGroupId
      },
      sell: "",
      name3: "",
      from2: {
        name: "",
        quality: "",
        box_item_whitelist_id: "",
        probabilityInfact: "",
        probabilityShow: "",
        img:'',
        order: "",
        price: "",
        box_id: this.boxGroupId
      },
      sel: "",
      quality: "暂无",
      currentPage:1,
      img:'',
      ids:'',
      num:1
    };
  },
  created() {
    $axios
      .getAll("/gamemall/box/item", {
        id: this.boxGroupId,
        currentPage: 1,
        pageSize: 3
      })
      .then(res => {
        if (res.code == 200) {
          this.tableData = res.obj;
        }
      });
    $axios.getAll("/gamemall/droplist/quality", { id: 1 }).then(res => {
      if (res.code == 200) {
        this.sel = res.obj;
      }
    });
  },
  methods: {
    changesel(){
      this.sel.map((item)=>{
        if(item.name == this.quality){
          this.from2.quality = item.id
        }
      })
    },
    currentChanges(e){
        $axios
        .getAll("/gamemall/open/list", {
          name: this.name3,
          currentPage: e,
          pageSize: 3
        }).then((res)=>{
          if(res.code == 200){
            this.sell = res.obj
          }
        })
    },
    updataAdd(){
      this.from2.name = this.name3
      this.sel.map((item)=>{
        if(item.name == this.quality){
          this.from2.quality = item.id
        }
      })
      delete this.from2.boxId
      var form = this.$refs.form
            axios({
                url:`${BasicsApi}/gamemall/box/edit`,
                data:new FormData(form),
                method:'post',
                headers:{
                    'Content-Type':'multipart/form-data',
                    'token':JSON.parse(localStorage.getItem('user')).sessionId
                }
            }).then((res)=>{
                if(res.data.code == 200){
                  this.$message({
                    showClose: true,
                    message: '更新成功',
                    type: 'success'
                    });
                  this.show = false
                  $axios.getAll('/gamemall/box/item',this.from1).then((res)=>{
                      if(res.code == 200){
                        this.tableData = res.obj;
                      }
                    })
                }else{
                  this.$message({
                    showClose: true,
                    message: '更新失败',
                    type: 'error'
                    });
                }
            })

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.img = res.data
      this.from2.img = res.data
    },
    changesell(name) {
      this.name3 = name;
      this.shows = false;
      $axios
        .getAll("/gamemall/open/list", { name, currentPage: 1, pageSize: 3 })
        .then(res => {
          if (res.code == 200) {
            this.from2.box_item_whitelist_id = res.obj.list[0].id;
            this.from2.price = res.obj.list[0].price;
            this.from2.quality = res.obj.list[0].quality;
            this.imageUrl = res.obj.list[0].img
            this.sel.map(item => {
              if (item.id == res.obj.list[0].quality) {
                this.quality = item.name;
              }
            });
          }
        });
    },
    down() {
      $axios
        .getAll("/gamemall/open/list", {
          name: this.name3,
          currentPage: 1,
          pageSize: 3
        })
        .then(res => {
          if (res.code == 200) {
            this.sell = res.obj;
            this.shows = true;
          }
        });
    },
    currentChange(e) {
      var options = false
      Loading.service(options);
      this.currentPage = e
      this.from.currentPage = e;
      this.from1.currentPage = e;
      $axios.getAll('/gamemall/box/item',this.from1).then((res)=>{
        if(res.code == 200){
           this.tableData = res.obj;
            let loadingInstance = Loading.service(options);
            this.$nextTick(() => { 
              loadingInstance.close();
            });
        }
      })
    },
    search() {
      var options = false
      Loading.service(options);
      this.from1 = JSON.parse(JSON.stringify(this.from));
      $axios.getAll("/gamemall/box/item", this.from1).then(res => {
        if (res.code == 200) {
          this.tableData = res.obj;
          let loadingInstance = Loading.service(options);
            this.$nextTick(() => { 
              loadingInstance.close();
            });
        }
      });
    },
    delet(e) {
       $axios.postAll(`/gamemall/box/delete?id=${e}`).then((res)=>{
          if(res.code == 200){
            $axios.getAll("/gamemall/box/item", this.from1).then(res => {
                if (res.code == 200) {
                  this.$message({
                    showClose: true,
                    message: '已停用',
                    type: 'success'
                    });
                  this.tableData = res.obj;
                }else{
                  this.$message({
                  showClose: true,
                  message: '停用失败',
                  type: 'error'
                  });
                }
              });
          }
       })
    },
    insert() {
      this.show = true;
      this.bool = 0;
      this.changes()
      
    },
    change() {
      this.$emit("show");
    },
    showw() {
      this.show = false;
      this.changes()
    },
    changes(){
        this.from2 = {
        name: "",
        img: "",
        quality: "",
        box_item_whitelist_id: "",
        probabilityInfact: "",
        probabilityShow: "",
        order: "",
        price: "",
        box_id: this.boxGroupId}
        this.quality = '暂无'
        this.name3 = ''
        this.imageUrl = ''

    },
    updata(e) {
      this.name3 = e.name
      this.quality = e.quality
      this.bool = 1;
      this.show = true;
      this.imageUrl = e.img
      this.ids = e.id
      
      this.from2 = JSON.parse(JSON.stringify(e));
      this.sel.map((item)=>{
        if(item.name == this.quality){
          this.from2.quality = item.id
        }
      })
    },
    insertAdd() {
      this.from2.order = this.from2.order * 1;
      this.from2.name = this.name3;
      this.from2.img = this.img
      $axios.postAll("/gamemall/box/add", this.from2).then(res => {
        if(res.code == 200){
          this.$message({
              showClose: true,
              message: '新增成功',
              type: 'success'
              });
           this.show = false
            $axios.getAll('/gamemall/box/item',this.from1).then((res)=>{
                if(res.code == 200){
                  this.tableData = res.obj;
                }
              })
        }
      });
      if(this.from2.box_item_whitelist_id == ''){
             this.num = 0
             this.$message({
                  showClose: true,
                  message: '新增失败',
                  type: 'error'
              })
              setTimeout(()=>{
                this.num = 1
              },2000)
        }
    }
  }
};
</script>
<style lang="less" >
@import "../../../style/mixin.less";
.BoxGroupings {
  .imgo{
    position: absolute;
    top: 191px;
    left: 192px;
  }
  .idd{
    margin: 20px 0px  120px  0px!important;
    .el-pagination{
      position: absolute;
      left: -62px;
    }
  }
  .imgg{
    width: 100px;
    height: 50px;
  }
  .img{
     margin-bottom: 100px!important;
     margin-top: 100px!important;
      .avatar-uploader {
        position: absolute;
        left: 199px;
        top: 200px;
        font-size: 42px;
      }
  .avatar {
    width: 100px;
    height: 100px;
  }
  }
  
  .select {
    margin-left: 30px;
  }
  .divs {
    width: 300px;
    background: white;
    position: absolute;
    left: 193px;
    top: 92px;
    div {
      text-align: center;
      color: #ccc;
    }
    p {
      width: auto !important;
      text-align: left !important;
    }
    > p:hover {
      background: #ccc;
    }
  }
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(107, 96, 96, 0.6);
  z-index: 999;
  > div:nth-of-type(1) {
    background: white;
    display: inline-block;
    padding: 20px 30px;
    position: absolute;
    left: 50%;
    margin-left: -500px;
    top: 20%;
    .ppp {
      position: absolute;
      right: 20px;
      color: #ccc;
      cursor: pointer;
    }
    .color{
      border-color: red;
    }
    .el-pagination {
      text-align: center;
    }
    text-align: left;
    input {
      border: 1px solid #ccc;
      height: 30px;
    }
    > div:nth-of-type(1) {
      margin: 50px 0;
      .el-button {
        margin: 0 20px;
      }
      div {
        display: inline-block;
        margin-right: 100px;
      }
      p {
        display: inline-block;
        margin-right: 50px;
      }
    }
    .Modification {
      margin: 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 999;
      input {
        .w(300);
      }
      > div {
        .el-button {
          position: absolute;
          left: 40%;
        }
        > p {
          color: black;
          position: absolute;
          right: 20px;
          top: 5px;
          cursor: pointer;
        }
        background: rgba(255, 255, 255, 0.9);
        display: inline-block;
        position: absolute;
        top: 30%;
        left: 30%;
        padding-bottom: 70px;
        > div {
          text-align: left;
          margin: 50px;
          span {
            display: inline-block;
            .w(100);
          }
        }
      }
    }
  }
  > div:nth-of-type(2) {
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    > div {
      .p {
        position: absolute;
        right: 20px;
        top: 20px;
        color: #ccc;
      }
      background: white;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 10%;
      margin-left: -300px;
      width: 600px;
      padding-bottom: 30px;
      padding-top: 30px;
      > div:nth-of-type(3),
      > div:nth-of-type(7) {
        input {
          margin-left: 26px;
        }
      }
      input {
        width: 300px;
      }
      > div {
        margin: 30px 0px;
        padding-left: 100px;
        span {
          margin-right: 30px;
        }
      }
      > div:nth-of-type(8) {
        text-align: center;
        padding: 0;
        span {
          margin: 0;
        }
      }
    }
  }
}
</style>